<template>
    <div class="placeReader">
        <div class="index-head">
            <div class="left">
                <div class="title">
                    <i class="icon fl"></i>
                    <ul class="fr">
                        <li class="bold">布置阅读器</li>
                        <li>深圳辰尔科技有限公司</li>
                    </ul>
                </div>
            </div>
            <ul class="right fr">
                <li class="fl">
                    <pCircle :all="readerPro.all" :show="readerPro.show" :color="readerPro.color"></pCircle>
                    <p class="title tc">阅读器总量</p>
                </li>
                <li class="fl">
                    <pCircle :all="placePro.all" :show="placePro.show" :color="placePro.color"></pCircle>
                    <p class="title tc">已布置数量</p>
                </li>
                <li class="fl">
                    <pCircle :all="unPlacePro.all" :show="unPlacePro.show" :color="unPlacePro.color"></pCircle>
                    <p class="title tc">未布置数量</p>
                </li>
            </ul>
        </div>
        <div class="index-body add-device">
            <div class="content" v-if="!addSuccess">
                <textarea name="labelId" placeholder="请批量录入阅读器编号" class="label-input" v-model="readerNums"></textarea>
                <div class="place-choose">
                    <el-radio v-model="radio" label="1">自动布置</el-radio>
                    <el-radio v-model="radio" label="2">优先布置所选区域</el-radio>
                    <div class="tab-content" v-if="radio === '1'">
                        按区域新增时间先后顺序，自动布置未布置区域。
                    </div>
                    <div class="tab-content" v-else>
                        <p>优先布置的区域将会优先布置上阅读器，剩余的阅读器将会自动布置。</p>
                        <div class="area-list">
                            <el-checkbox-group v-model="checkedAreas" @change="handleCheckedAreasChange">
                                <ul>
                                    <li v-for="item in areaList" :key="areaList.areaId">
                                        <el-checkbox :label="item.areaId">{{item.areaName}}</el-checkbox>
                                    </li>
                                </ul>
                            </el-checkbox-group>
                            <p class="tc" style="padding: 0.1rem 0">
                                <el-checkbox :indeterminate="isIndeterminate"
                                             v-model="checkAll" border
                                             @change="handleCheckAllChange">全选
                                </el-checkbox>
                                <el-button type="info" @click="confirm">确定</el-button>
                            </p>
                        </div>
                    </div>
                    <ul class="place-info">
                        <li>1.此前已布置的阅读器不受影响。</li>
                        <li>2.剩余未布置的阅读器将会在下次新增区域后自动布置到该区域。</li>
                        <li>3.请尽快按照最新的区域表格或者阅读器表格进行实地布置阅读器。</li>
                    </ul>
                    <p class="tc add-btn">
                        <el-button type="primary" @click="addConfirm">新增</el-button>
                    </p>
                </div>
            </div>
            <div class="success tc" v-else>
                <p>
                    <i class="success-icon"></i>
                </p>
                <div class="success-text tc">
                    <p style="font-size: 0.2rem;margin-bottom: 0.6rem">成功新增 {{ sucReader }} 个阅读器！</p>
                    <p class="to-check">
                        其中 {{ readerNum }} 个阅读器已自动部署到区域，请前往
                        <router-link tag="a" to='/layout/checkReader'>
                            查看阅读器
                        </router-link>
                        页面进行查看！
                    </p>
                    <p>或 <span class="continue-place" @click="continueP">继续布置</span></p>
                </div>
                <ul class="place-info">
                    <li class="tl">1.此前已布置的阅读器不受影响。</li>
                    <li class="tl">2.剩余未布置的阅读器将会在下次新增区域后自动布置到该区域。</li>
                    <li class="tl">3.请尽快按照最新的区域表格或者阅读器表格进行实地布置阅读器。</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import pCircle from '@/components/progressCircle'

    export default {
        name: "placeReader",
        components: {
            pCircle
        },
        data() {
            return {
                radio: '1', // 布置方式切换状态
                areaList: [], // 区域列表
                checkedAreas: [], // 选中区域列表
                sucReader: 0, // 成功数量
                readerNum: 0, // 已绑定区域数量
                checkAll: false, // 全选按钮的值
                isIndeterminate: true,
                addSuccess: false,
                // 阅读器总量进度条参数
                readerPro: {
                    all: 0,
                    show: 0,
                    color: '#FF3F30'
                },
                // 已布置数量进度条参数
                placePro: {
                    all: 0,
                    show: 0,
                    color: '#FF910C'
                },
                // 未布置数量进度条参数
                unPlacePro: {
                    all: 0,
                    show: 0,
                    color: '#3BDDEF'
                },
                readerNums: ''
            }
        },
        computed: {
            checkedAllAreas() {
                let arr = []
                this.areaList.forEach(item => {
                    arr.push(item.areaId)
                })
                return arr
            }
        },
        methods: {
            // 全选按钮
            handleCheckAllChange(val) {
                this.checkedAreas = val ? this.checkedAllAreas : []
                this.isIndeterminate = false
            },
            // 复选框组里面的状态改变
            handleCheckedAreasChange(value) {
                let checkedCount = value.length
                this.checkAll = checkedCount === this.areaList.length
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.areaList.length
            },
            confirm() {
                console.log(this.checkedAreas)
            },
            /**
             * 确认新增
             */
            addConfirm() {
                if (this.readerNums.trim() === "") {
                    this.$message.error(this.$msgDictionary.add.emptyReaders)
                    return
                }
                let readerArr = [...new Set(this.readerNums.split(','))]
                if (readerArr.length > this.checkedAreas.length) {
                    this.moreReaders(readerArr, this.checkedAreas)
                } else {
                    this.moreAreas(readerArr, this.checkedAreas)
                }
            },
            /**
             * 阅读器大于区域数量--①
             * 遍历区域，多的阅读器调用单独存入阅读器接口
             */
            moreReaders(reader, area) {
                let params = {
                    userID: "",
                    areaIdAndReadersId: null
                }
                if (localStorage.getItem("user")) {
                    params.userID = JSON.parse(localStorage.getItem("user")).userId
                }
                let obj = {}, temporaryArr = []
                area.forEach((item, index) => {
                    obj[item] = [reader[index]]
                    temporaryArr.push(reader[index])
                })
                params.areaIdAndReadersId = obj
                if (Object.keys(obj).length === 0) {
                    // 说明没选区域，直接调添加阅读器接口
                    this.$message.error("直接添加阅读器没有接口哇")
                } else {
                    // 先调绑定区域接口，再调添加阅读器接口
                    this.bandArea(params)
                    let difference = temporaryArr.concat(reader).filter(v => !temporaryArr.includes(v) || !reader.includes(v))
                    console.log(difference) // 这就是剩余的未绑定区域的阅读器标签了
                }
            },
            /**
             * 区域大于阅读器数量--②
             * 遍历阅读器，多的区域不管
             */
            moreAreas(reader, area) {
                let params = {
                    userID: "",
                    areaIdAndReadersId: null
                }
                if (localStorage.getItem("user")) {
                    params.userID = JSON.parse(localStorage.getItem("user")).userId
                }
                let obj = {}
                this.readerNum = 0
                this.sucReader = 0
                for (let i = 0; i < reader.length; i++) {
                    if (isNaN(reader[i] * 1)) {
                        this.$message.error(this.$msgDictionary.add.readers.isNaN)
                        return
                    }
                    this.readerNum++
                    this.sucReader++
                    obj[area[i]] = [reader[i]]
                }
                params.areaIdAndReadersId = obj
                this.bandArea(params)
            },
            /**
             * 此处掉的阅读器和区域绑定的接口
             * @param params
             */
            bandArea(params) {
                this.$ajax
                    .readers
                    .bandArea(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.$message.success(this.$msgDictionary.add.suc)
                            this.addSuccess = true
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            },
            continueP() {
                this.addSuccess = false
                this.radio = '1'
                this.checkedAreas = []
                this.readerNums = ''
                this.checkAll = false
            }
        },
        mounted() {
            let params = {
                userId: ""
            }
            if (localStorage.getItem("user")) {
                params.userId = JSON.parse(localStorage.getItem("user")).userId
            }
            this.$ajax
                .areas
                .getAreas(params)
                .then((res) => {
                    let result = res.data
                    if (result.code === 200) {
                        if (result.result) {
                            this.areaList = result.result.areasInfoDTOS.content
                        }
                    } else if (result.code === 408) {
                        this.$message.error(this.$msgDictionary.loginTimeout)
                        let timer = setTimeout(() => {
                            clearTimeout(timer)
                            this.$router.push({path: '/login'})
                        }, 1500)
                    } else {
                        this.$message.error(result.msg)
                    }
                }, () => {
                    this.$message.error(this.$msgDictionary.serviceException)
                })
            this.$ajax
                .readers
                .getReaders(params)
                .then((res) => {
                    let result = res.data
                    if (result.code === 200) {
                        if (result.result) {
                            this.readerPro.all = result.result.totalReaderNum
                            this.readerPro.show = result.result.totalReaderNum
                            this.placePro.all = result.result.totalReaderNum
                            this.placePro.show = result.result.bandAreaNum
                            this.unPlacePro.all = result.result.totalReaderNum
                            this.unPlacePro.show = result.result.notBandAreaNum
                        }
                    } else if (result.code === 408) {
                        this.$message.error(this.$msgDictionary.loginTimeout)
                        let timer = setTimeout(() => {
                            clearTimeout(timer)
                            this.$router.push({path: '/login'})
                        }, 1500)
                    } else {
                        this.$message.error(result.msg)
                    }
                }, () => {
                    this.$message.error(this.$msgDictionary.serviceException)
                })
        }
    }
</script>

<style lang="scss" type="text/scss" scoped>
    @import "../../assets/css/add-device";

    .placeReader {
        height: 100%;
        .index-head {
            .left {
                .title {
                    .icon {
                        background-position: -449px -446px;
                    }
                }
            }
        }
    }
</style>
